<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="a" width="140px" height="30px"></canvas>
    <input type="text" id="mycode" />
    <button onclick="checkCode()">验证</button>
    <script>
        function getCode(n) {
            var str = '返回验证码最后一个字符位置的随机数ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
            var sum = '';
            for (var i = 0; i < n; i++) {
                //获取0~最后一个字符位置的随机数
                var r = parseInt(Math.random() * str.length);
                sum += str.charAt(r);//获取随机的字符
            }
            return sum;// 返回验证码
        }
        // 将验证码画成图片
        function drawCode(code){
            var ctx = document.querySelector('#a').getContext('2d');
            ctx.font = "normal 20px 微软雅黑";
            ctx.fillText(code,20,20);
        }
        var code = getCode(6); // 获取了验证
        drawCode(code);
        //检查验证码是否正确
        function checkCode(){
            if(code.toLowerCase() == mycode.value.toLowerCase()){
                alert("验证码正确")
            }else{
                alert("验证码错误")
            }
        }
    </script>
</body>

</html>